<template>
  <div v-if="show" class="fontDa xp5">
    <div class="customTableHeader">
      <div class="customTableTitle">{{ cppName }}</div>
    </div>
   <div class="fontDa">
    <div class="zhaoPian">
      <div style="padding-bottom: 10px;">单位：{{dw}}</div>
    </div>
    <div class="cpTable">
      <div class="table-box">
        <!-- 单选 -->
        <table v-for="(tableColumn,index) in radioList">
          <thead>
            <tr>
              <td style="background:#b0bde2;font-weight:bold;" colspan="10">{{index+1}}、{{tableColumn.title}}</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <template v-for="(item,index) in tableColumn.optList">
                <td v-if="tableColumn.optList.length == 3" style="width: 300px;">{{item.optName}}</td>
                <td v-else-if="tableColumn.optList.length == 4" style="width: 250px;">{{item.optName}}</td>
                <td v-else-if="tableColumn.optList.length == 5" style="width: 200px;">{{item.optName}}</td>
                <td v-else-if="tableColumn.optList.length == 2" style="width: 500px;">{{item.optName}}</td>
                <td v-else >{{item.optName}}</td>
                <td style="width: 150px;">
                  <el-button type="text" icon="el-icon-success" class="cpCheck"  v-if="item.shows == 1"></el-button>
                  <el-button type="text" class="cpCheck" v-else @click="choosebtn(index,item,tableColumn)"><i class="noChecked"></i></el-button>
                </td>
              </template>
            </tr>
          </tbody>
        </table>
        <!-- 多选 -->
        <table v-for="(multiSelect,index) in multipleList">
          <thead>
            <tr>
              <td style="background:#b0bde2;font-weight:bold;" colspan="2">{{radioList.length+index+1}}、{{multiSelect.title}}</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,indexs) in multiSelect.optList">
              <td v-if="multiSelect.optList.length == 3" style="text-align: left;width: 300px;">{{item.optName}}</td>
              <td v-else-if="multiSelect.optList.length == 4" style="text-align: left;width: 250px;">{{item.optName}}</td>
              <td v-else-if="multiSelect.optList.length == 5" style="text-align: left;width: 200px;">{{item.optName}}</td>
              <td v-else-if="multiSelect.optList.length == 2" style="text-align: left;width: 500px;">{{item.optName}}</td>
              <td v-else style="text-align: left;">{{item.optName}}</td>
              <td style="width: 150px;">

                <!--                  <el-button type="text" icon="el-icon-success" class="cpCheck" v-if="scope.row.fzId==gz.id"></el-button>-->
                <!--                  <el-button type="text" class="cpCheck" v-else @click="cpDaFen(scope.$index,gz)"><i class="noChecked"></i></el-button>-->

                <el-button style="height:32px;width: 32px" type="text" icon="el-icon-success" class="cpCheck"  v-if="item.shows == 1" @click="delDaFen(indexs,item)"></el-button>
                <el-button style="height:32px;width: 32px" type="text" class="cpCheck" v-else @click="moreChooseBtn(indexs,item,multiSelect)"><i class="noChecked"></i></el-button>
              </td>
            </tr>
          </tbody>
        </table>
        <table v-for="(questionList,indexs) in qList">
          <thead>
            <tr>
              <td style="background:#b0bde2;font-weight:bold;" colspan="2">
                <div class="sub">
                   <div style="font-size: 24px;">{{radioList.length+multipleList.length+indexs+1}}、{{questionList.title}}</div>
                </div>
              </td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <el-input
                  @change="submit(questionList)"
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="questionList.answer">
                </el-input>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
<!--      <div style="width: 100%;margin-top: 10px" class="zfheaderbox">-->
<!--        <div>{{cepingHdglCppmxbInfo.footerText}}</div>-->
<!--      </div>-->
      <!-- <el-button @click="exportExcel(111)">导出</el-button> -->
      </div>
    </div>
<!--    <div class="flex justifyContentSpaceBetween " style=" height:100px;">-->
<!--        <div></div>-->
<!--        <div style="position: relative; margin-top:200px;" class="flex justifyContentSpaceBetween ">-->
<!--           <span><img src="/img/logo.png" width="40" height="40"></span><span class="ml10 font28">共享运营公司测评系统</span>-->
<!--        </div>-->
<!--    </div>-->
  </div>

</template>

<script>
import {xpInfo,daFenCp,delDaFenCp,daFenCpAnswer,xpInfoSm} from "@/api/ceping/jxevalvote";

export default {
  name: "cpIndexXp",
  data() {
    return {
      shuxing:"top-end",
      show: false,
      df: true,
      msgList:[],
      answerJson:[],
      voteAnsList:[],
      voteOptList:[],
      cepingHdglXpxxb: {},
      cepingHdglCppmxbInfo: {},
      fzbList: [],
      cppName:"",
      time:"",
      dw:"",
      radioList:[],
      questionList:[],
      multipleList:[],
      qList:[],
      cppId:"",
      xpCode:"",
      userId:0
    }
  },
  methods: {
    initConfig(id) {
      this.show = false;

    },
    initHd(hdId,cppId,userId) {
      this.show = false;
      this.cppId = cppId;
      this.hdId=hdId;
      this.userId=userId;
      let params ={
        cppId:cppId,
        hdId:hdId,
        userId:userId
      }
      xpInfoSm(params).then(res => {
        this.msgList = JSON.parse(res.data.data.cepingHdglCppmxbInfo.ruleDetailJson);
        this.voteAnsList = res.data.data.voteAnsList;
        this.qList = [];
        this.radioList = [];
        this.multipleList = [];
        this.voteOptList = res.data.data.voteOptList;
        this.cepingHdglXpxxbList = res.data.data.cepingHdglXpxxbList;
        this.hdId = res.data.data.cepingHdglCppmxbInfo.hdId;
        this.cepingHdglCppmxbInfo = res.data.data.cepingHdglCppmxbInfo
        this.msgList.forEach(item=>{
          if(item.itemType == 1){
            this.radioList.push(item)
            this.radioList.forEach(each=>{
              each.optList.forEach(it=>{
                var voteObj = this.voteOptList.find(voteItem => voteItem.itemId == it.itemId && voteItem.optId == it.id);
                if(voteObj){
                  this.$set(it, "shows", 1);
                }else{
                  this.$set(it, "shows", 0);
                }
              })
            })
          }else if(item.itemType == 3){
            var voteObj = this.voteAnsList.find(voteItem => voteItem.itemId == item.itemId);

            var pushObj={
              answer:'',
              title:item.title,
              itemId:item.itemId,
            }
            if(voteObj){
              pushObj.answer=voteObj.answer
              this.qList.push(pushObj)
            }else{
              this.qList.push(pushObj)
            }


          }else if(item.itemType == 2){
            this.multiSelect = item;
            this.multipleList.push(item)
            this.multipleList.forEach(multiSelect=>{
              multiSelect.optList.forEach(it=>{
                var voteObj = this.voteOptList.find(voteItem => voteItem.itemId == it.itemId && voteItem.optId == it.id);
                if(voteObj){
                  this.$set(it, "shows", 1);
                }else{
                  this.$set(it, "shows", 0);
                }
              })
            })
          }
        })
        this.cppName = res.data.data.cepingHdglCppmxbInfo.cppName;
        this.time = res.data.data.cepingHdglCppmxbInfo.sheetDate
        this.dw = res.data.data.cepingHdglCppmxbInfo.sheetDept
        this.init();
      })

    },
    initXp(cppId,xpCode) {
      this.show = false;
      this.cppId = cppId;
      this.xpCode = xpCode;
      this.userId = 0;
      var params ={
        cppId:cppId,
        xpCode:xpCode
      }
      xpInfo(params).then(res => {
        this.msgList = JSON.parse(res.data.data.cepingHdglCppmxbInfo.ruleDetailJson);
        this.voteAnsList = res.data.data.voteAnsList;
        this.qList = [];
        this.radioList = [];
        this.multipleList = [];
        this.voteOptList = res.data.data.voteOptList;
        this.cepingHdglXpxxbList = res.data.data.cepingHdglXpxxbList;
        this.hdId = res.data.data.cepingHdglCppmxbInfo.hdId;
        this.cepingHdglCppmxbInfo = res.data.data.cepingHdglCppmxbInfo
        this.msgList.forEach(item=>{
        if(item.itemType == 1){
          this.radioList.push(item)
          this.radioList.forEach(each=>{
              each.optList.forEach(it=>{
               var voteObj = this.voteOptList.find(voteItem => voteItem.itemId == it.itemId && voteItem.optId == it.id);
              if(voteObj){
                this.$set(it, "shows", 1);
              }else{
                this.$set(it, "shows", 0);
              }
            })
          })
        }else if(item.itemType == 3){
             var voteObj = this.voteAnsList.find(voteItem => voteItem.itemId == item.itemId);
                var pushObj={
                answer:'',
                title:item.title,
                itemId:item.itemId,
              }
            if(voteObj){
              pushObj.answer=voteObj.answer
             this.qList.push(pushObj)
            }else{
             this.qList.push(pushObj)
            }

        }else if(item.itemType == 2){
          this.multiSelect = item;
          this.multipleList.push(item)
          this.multipleList.forEach(multiSelect=>{
              multiSelect.optList.forEach(it=>{
              var voteObj = this.voteOptList.find(voteItem => voteItem.itemId == it.itemId && voteItem.optId == it.id);
              if(voteObj){
                this.$set(it, "shows", 1);
              }else{
                this.$set(it, "shows", 0);
              }
            })
          })
        }
      })
      this.cppName = res.data.data.cepingHdglCppmxbInfo.cppName;
      this.time = res.data.data.cepingHdglCppmxbInfo.sheetDate
      this.dw = res.data.data.cepingHdglCppmxbInfo.sheetDept
        this.init();
      })

    },
    init(){
      this.show = true;
    },
    choosebtn(index,gz,tableColumn){
      let info = {
        xpCode:  this.cepingHdglXpxxbList[0].xpCode,
        cxpCode: this.cepingHdglXpxxbList[0].cxpCode,
        voteId: this.cepingHdglXpxxbList[0].id,
        itemId: gz.itemId,
        optId: gz.id,
        sheetType: 5,
        voteOptId: gz.id,
        itemType:1,
        userId:0
      }
      daFenCp(info).then(res => {
        if (res.data.code == "0") {
          this.voteOptList=res.data.data.voteOptList
          res.data.data.voteOptList.forEach(items=>{
            if(items.optId == gz.id || items.itemId == gz.itemId){
              tableColumn.optList.forEach(j=>{
                if(items.optId == j.id){
                  j.shows = 1
                }else{
                  j.shows = 0
                }
              })
              this.$forceUpdate()
            }
          })
        } else {
          this.$notify.closeAll();
          this.$notify.error(res.data.msg)
        }
      })

    },
    //校验有没有选择完数据
    yzDf(){
      let cpx = 0;
      //判断单选有没有选了
      var danOk=[],duoOk=[];

      if(this.voteOptList.length==0 && this.radioList.length==0){
        return 0;
      }
      if(this.voteOptList.length==0){
        return 1;
      }
      for (var i in this.radioList) {
         var voteObj = this.voteOptList.find(voteItem => voteItem.itemId == this.radioList[i].itemId);
          if (!voteObj) {
            cpx=1;
          }
      }
      //判断多选有没有选了
      // for (var i in this.multipleList) {
      //   var voteObj = this.voteOptList.find(voteItem => voteItem.itemId == this.multipleList[i].itemId);
      //   if(!voteObj){
      //     cpx=1
      //   }
      // }
      //判断问答有没有答了
      // for (var i in this.qList) {
      //   var voteObj = this.voteAnsList.find(voteItem => voteItem.itemId == this.qList[i].itemId);
      //   if(!voteObj){
      //     cpx=1
      //   }
      // }
      // if(this.voteAnsList.length!=this.qList.length){
      //   cpx=1
      // }
      // for (var i in this.tableData) {
      //   if (this.tableData[i].wxOpenid==0) {
      //     return 1;
      //   }
      // }
      return cpx;
    },
    // 多选
    moreChooseBtn(index,gz,multiSelect){
      let info = {
        xpCode:  this.cepingHdglXpxxbList[0].xpCode,
        cxpCode: this.cepingHdglXpxxbList[0].cxpCode,
        voteId: this.cepingHdglXpxxbList[0].id,
        itemId: gz.itemId,
        optId: gz.id,
        sheetType: 5,
        voteOptId: gz.id,
        itemType:2,
        userId:0
      }
      daFenCp(info).then(res => {
        if (res.data.code == "0") {
          this.voteOptList=res.data.data.voteOptList;
          res.data.data.voteOptList.forEach(items=>{
            if(items.optId == gz.id || items.itemId == gz.itemId){
              multiSelect.optList.forEach(j=>{
                if(items.optId == j.id){
                  j.shows = 1
                }
              })
              this.$forceUpdate()
            }
          })
        } else {
          this.$notify.closeAll();
          this.$notify.error(res.data.msg)
        }
      })
    },
    delDaFen(index, gz){
      let info = {
        voteId: this.cepingHdglXpxxbList[0].id,
        optId:gz.id,
        xpCode:this.cepingHdglXpxxbList[0].xpCode,
      }
      delDaFenCp(info).then(res => {
        if (res.data.code == "0") {
          this.voteOptList=res.data.data.voteOptList;
          gz.shows = 0;
          this.$forceUpdate()
        } else {
          this.$notify.closeAll();
          this.$notify.error(res.data.msg)
        }
      })
    },
    //获取脚标说明
    getFooterText(){
      return this.cepingHdglCppmxbInfo.footerText;
    },
    submit(item){
      this.answerJson = [];
      var obj ={
        itemId:item.itemId,
        answer:item.answer,
      }
      this.answerJson.push(obj)
      var params ={
        hdId:this.hdId,
        cppId:this.cppId,
        xpCode:this.xpCode,
        answerJson:this.answerJson,
        userId:this.userId,
      }
      daFenCpAnswer(params).then((response)=>{
        if(response.data.code == 0){
          this.voteAnsList=response.data.data.voteAnsList
          // this.$message.success( '提交成功!')
        }
      })

    },
  }
}
</script>

<style scoped>
.h_dw_time{
  text-align: left;
}
.table-box tr, .table-box tr td{
    border:solid 1px #b0bde2;
    height: 30px;
  }
  .table-box table{
    width:100%;
  }
  .table-box tr td{
    padding:8px 3px;
    font-size:24px;
    min-width:50px;
    color: #303745;
  }
  .table-box tbody{
    text-align: center;

  }
.sub{
  display: flex;
  justify-content: space-between;
}
.fontDa.xp5 .cpTable .cpCheck .noChecked{
  width:26px!important;
  height: 26px!important;
}
</style>

